<template>
<div>
   <!-- 欢迎{{phoneCode}}得到来 <input type="button" value="退出登陆" @click="outLogin"> -->
   <div class="header">
    <div>
      <div class="top">
        <div class="img">
          <img src="@/assets/img/cat.jpeg">
        </div>
        <div class="text">
          <h1>尊贵的用户</h1>
          <p>
            <van-icon name="graphic" /> 
            {{phoneCode}}
          </p>
        </div>
        <span>
          <van-icon name="arrow" />
        </span>
      </div>
    </div>
    <div class="center">
      <div class="left">
        <p>0个</p>
        <h2>红包</h2>
      </div>
      <div class="right">
        <p>0个</p>
        <h2>金币</h2>
      </div>
    </div>
    <router-link to="/address">
      <div class="grid1">
        <van-cell title="我的地址" is-link to />
      </div>
    </router-link>
    <div class="grid2">
      <a href="https://activity.m.duiba.com.cn/chome/index?from=login&spm=14695.1.1.1">
        <van-cell title="金币商城" is-link to />
      </a>
      <van-cell title="分享拿20元现金" is-link to="/commend" />
    </div>
    <div class="grid3">
      <van-cell title="我的客服" is-link to="/service" />
      <van-cell title="下载饿了么APP" is-link to="/download" />
      <van-cell title="规则中心" is-link to="/agreement" />
    </div>
    <div>
      <!-- <h3>隐私政策</h3> -->
     <!-- <div class="out" type="button" value="退出登录" @click="outLogin"> -->
     <van-button 
     color="#7232dd"
     type="button" 
     class="out"  
     value="退出登录"
     icon-position="middle"
     @click="outLogin">
    
     退出按钮
    </van-button>
    </div>
  </div>
</div>

</template>

<script>
import "@/assets/iconfont/iconfont.css"
import { Dialog } from 'vant';
export default {
    data(){
        return{
            phoneCode:""

        }
    },
    mounted(){
      
    },
    created(){
        this.phoneCode = localStorage.phoneCode
    },
    methods:{   
        outLogin(){
           Dialog.confirm({
          title: '尊贵的会员',
          message: '请再次确认是否退出',
        })
          .then(() => {
            // on confirm
           localStorage.clear()
           this.$router.push('/')
          })
          .catch(() => {
            // on cancel
            // console.log(22)
            alert('网络异常')
          });
          
        }
    }
    
}
</script>

<style lang='less' scoped>
.top {
  display: flex;
  background-image: linear-gradient(90deg, #0af, #0085ff);
  padding: 0.666667rem 0.4rem;
  padding: 6.666667vw 4vw;
  color: #fff;
  align-items: center;
  .img {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .text {
    margin-left: 20px;
    h1 {
      font-size: 0.46rem;
      margin-bottom: 0.213333rem;
      margin-bottom: 2.133333vw;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    p {
      align-items: center;
      font-size: 12px;
    }
  }
  span {
    margin-left: 130px;
    .van-icon {
      font-size: 15px;
    }
  }
}
.center {
  display: flex;
  justify-content: space-between;
  text-align: center;
  border-bottom: 10px solid #f5f5f5;
  .left {
    width: 190px;
    height: 80px;
    border-right: 2px solid #f5f5f5;
    p {
      font-size: 20px;
      font-weight: 700;
      color: rgb(255, 95, 62);
      margin-top: 20px;
    }
    h2 {
      color: #666;
      font-weight: 700;
      font-size: 12px;
    }
  }
  .right {
    width: 190px;
    height: 80px;
    p {
      font-size: 20px;
      font-weight: 700;
      color: rgb(106, 194, 11);
      margin-top: 20px;
    }
    h2 {
      color: #666;
      font-weight: 700;
      font-size: 12px;
    }
  }
}
.grid1 {
  border-bottom: 10px solid #f5f5f5;
}
.grid2 {
  border-bottom: 10px solid #f5f5f5;
}
.grid3 {
  border-bottom: 10px solid #f5f5f5;
}
h3 {
  text-align: center;
  margin: 6.133333vw auto;
  color: #4da6f0;
  font-size: 0.3rem;
  font-weight: normal;
}
.out {
  
 margin-left: 150px;
 
}

</style>